<template>
  <div class="tabBar">
    <div class="app_nav">
      <router-link :class="addActiveFn('/')" to="/">主页</router-link>
      <router-link :class="addActiveFn('/train')" to="/train">训练</router-link>
      <router-link
        :class="[addActiveFn('/echartsview01'), 'sport']"
        to="/echartsview01"
        >Sport</router-link
      >
      <router-link :class="addActiveFn('/community')" to="/community"
        >社区</router-link
      >
      <router-link :class="addActiveFn('/persional')" to="/persional"
        >我的</router-link
      >
    </div>
  </div>
</template>

<script lang="ts">
import { Vue } from "vue-class-component";

export default class TabBarView extends Vue {
  addActiveFn(route: string) {
    return this.$route.path === route ? "active" : "";
  }
}
</script>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
}

img {
  vertical-align: bottom;
  width: 30px;
}

@keyframes lofing {
  to {
    transform: rotate(360deg);
  }
}

.tabBar {
  .app_nav {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100vw;
    height: 70px;
    background: #051338;
    border-radius: 30px 30px 0 0;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    font-size: 18px;
    -webkit-tap-highlight-color: transparent;

    a {
      color: white;
      text-decoration: none;
      font-size: 18px;
      font-weight: 700;
    }

    .active {
      color: aqua;
    }

    .sport {
      font-size: 20px;
      position: relative;
      z-index: 0;
      overflow: hidden;
      width: 100px;
      height: 40px;
      border-radius: 10px;
      text-align: center;
      box-sizing: border-box;
      // padding: 5px 0 0 0;

      &::before {
        content: "";
        inset: -50px;
        // background: gray;
        position: absolute;
        animation: lofing 2s linear infinite;
        color: transparent;
        background-image: conic-gradient(transparent, aqua, transparent 20%);
        z-index: -5;
      }

      &::after {
        content: "";
        inset: 2px;
        background: #051338;
        position: absolute;
        border-radius: 10px;
        z-index: -3;
      }
    }
  }
}
</style>
